<!-- 重置密码 - resetPassword--  -->
<template>
	<view>
		<!-- 标题栏 -->
		<view class="head-box ss-m-b-60">
			<view class="head-title ss-m-b-20">修改支付密码</view>
			<!-- <view class="head-subtitle">为了您的账号安全，设置密码前请先进行安全验证</view> -->
		</view>

		<!-- 表单项 -->
		<uni-forms ref="resetPasswordRef" v-model="state.model" :rules="state.rules" validateTrigger="bind"
			labelWidth="140" labelAlign="center">
			 <uni-forms-item name="mobile" label="手机号">
        <uni-easyinput
          placeholder="请输入手机号"
          v-model="userInfo.mobile"
          type="number"
		  disabled
          :inputBorder="false"
        >
          <template v-slot:right>
            <button
              class="ss-reset-button code-btn code-btn-start"
              :disabled="state.isMobileEnd"
              :class="{ 'code-btn-end': state.isMobileEnd }"
              @tap="getSmsCode('changepaypwd', userInfo.mobile)"
            >
              {{ getSmsTimer('changepaypwd') }}
            </button>
          </template>
        </uni-easyinput>
      </uni-forms-item>
			<!-- <uni-forms-item name="oldpassword" label="旧密码">
				<uni-easyinput type="password" placeholder="请输入旧密码" v-model="state.model.oldpassword  " :inputBorder="false">
				
				</uni-easyinput>
			</uni-forms-item> -->
			<uni-forms-item name="code" label="验证码">
        <uni-easyinput
          placeholder="请输入验证码"
          v-model="state.model.code"
          type="number"
          maxlength="4"
          :inputBorder="false"
        ></uni-easyinput>
      </uni-forms-item>
			<uni-forms-item name="password" label="密码">
				<uni-easyinput type="password" placeholder="请输入新密码" v-model="state.model.password" :inputBorder="false">
				
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="reNewPassword" label="确认密码">
				<uni-easyinput type="password" placeholder="确认新密码" v-model="state.model.reNewPassword" :inputBorder="false">
					<template v-slot:right>
						<button class="ss-reset-button login-btn-start" @tap="resetPasswordSubmit">
							确认
						</button>
					</template>
				</uni-easyinput>
			</uni-forms-item>
		</uni-forms>

		<button v-if="!isLogin" class="ss-reset-button type-btn" @tap="showAuthModal('accountLogin')">
			返回登录
		</button>
	</view>
</template>

<script setup>
	import {
		computed,
		watch,
		ref,
		reactive,
		unref
	} from 'vue';
	import sheep from '@/sheep';
	import {
		code,
		mobile,
		password,
		pay_pwd
	} from '@/sheep/validate/form';
	import {
		showAuthModal,
		closeAuthModal,
		getSmsCode,
		getSmsTimer
	} from '@/sheep/hooks/useModal';

	const resetPasswordRef = ref(null);
	const isLogin = computed(() => sheep.$store('user').isLogin);
	const userInfo = computed(() => sheep.$store('user').userInfo);
	// 数据
	const state = reactive({
		isMobileEnd: false, // 手机号输入完毕
		model: {
			mobile: '', //手机号
			code: '', //验证码
			oldpassword:'',
			password: '', //密码
			reNewPassword:'',
		},
		rules: {
			code,
			mobile,
			oldpassword:{
				rules: [
				  {
				    required: true,
				    errorMessage: '请输入旧密码',
				  },
				  ]
			},
			reNewPassword: {
			  rules: [
			    {
			      required: true,
			      errorMessage: '请确认密码',
			    },
			    {
			      validateFunction: function (rule, value, data, callback) {
			        if (value !== state.model.password) {
			          callback('两次输入的密码不一致');
			        }
			        if (value === state.model.oldpassword) {
			          callback('新密码不能与旧密码相同');
			        }
			        return true;
			      },
			    },
			  ],
			},
			password: pay_pwd,
		},
	});

	// 4.重置密码
	const resetPasswordSubmit = async () => {
		const validate = await unref(resetPasswordRef)
			.validate()
			.catch((error) => {
				console.log('error: ', error);
			});
		if (!validate) return;
		sheep.$api.user.changepaypwd(state.model).then((res) => {
			if (res.code === 1) {
				sheep.$store('user').getInfo();
				closeAuthModal();
			}
		});
	};
</script>

<style lang="scss" scoped>
	@import '../index.scss';
</style>